<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Vancouver Tongue</title>
<link href="/VancouverTongue/static/style.css" type="text/css"
	rel="stylesheet" />
<link rel="shortcut icon" href="/VancouverTongue/static/icon.png">
<script type="text/javascript">
	function show(name) {
		document.getElementById(name).style.display = 'block';
		document.getElementById(name + 'Button').style.display = 'none';
	}
	function hide(name) {
		document.getElementById(name).style.display = 'none';
		document.getElementById(name + 'Button').style.display = 'inline';
	}
</script>
<style>
textarea {
	min-height: 200px;
	max-height: 200px;
	min-width: 400px;
	max-width: 400px;
}

form {
	display: none;
}
</style>
</head>
<body>
	<jsp:include page="headTemplate.jsp" />

	<div>
		<div>
			<img src="${account.avatar}" />
		</div>
		<div>User Id: ${account.userId}</div>
		<div>
			<input id="passwordButton" type="button" value="Change Password"
				onClick="show('password');" />
				
			<form id="password" action="/VancouverTongue/${account.userId}/password" method="post"
				style="display: none;">
				<div>
					
					Old password: <input type="password" maxlength="20"
						name="oldPassword" />
				</div>
				<div>
					
					New password: <input type="password" maxlength="20"
						name="newPassword" />
				</div>
				<div>
					
					Confirm password: <input type="password" maxlength="20"
						name="confirmPassword" />
				</div>
				<div>
					<input type="submit" /><input type="reset" value="Cancel"
						onClick="hide('password');" />
				</div>
			</form>${passwordError}${newPasswordError}${confirmPasswordError}${unmatchedError}
		</div>
		<div>Email: ${account.email}</div>
		<div>
			<input id="emailButton" type="button" value="Change Email"
				onClick="show('email');" />
			<form id="email" action="/VancouverTongue/${account.userId}/email" method="post"
				style="display: none;">
				<div>
					New email: <input type="text" name="email" value="${account.email}" />
				</div>
				<div>
					<input type="submit" /><input type="reset" value="Cancel"
						onClick="hide('email');" />
				</div>
			</form>${emailError}
		</div>
		<div>Description: ${account.description}</div>
		<div>
			<input id="descriptionButton" type="button"
				value="Change Description" onClick="show('description')" />
			<form id="description" action="/VancouverTongue/${account.userId}/description"
				method="post" style="display: none;">
				<textarea name="description">${account.description}</textarea>
				<div>
					<input type="submit" /><input type="reset" value="Cancel"
						onClick="hide('description');" />
				</div>
			</form>${descriptionError}
		</div>
	</div>
	${alertBox}
</body>
</html>